<template>
  <!-- 查看公告 -->
  <div @click="handshow" class="report-road1">查看公告</div>
  <div class="report-road" v-show="never">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <h3>施工公告信息</h3>
        </div>
      </template>
      <span>公告发布时间:</span>2024/12/26 15:07:43
      <br />
      <span>公告发布内容:</span>同学广场发免费面包
      <br />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const never = ref(false);
const handshow = () => {
  never.value = !never.value;
};
</script>

<style scoped lang="scss">
.report-road1 {
  cursor: pointer;
}
.report-road {
  cursor: pointer;
  color: #409eff;
  z-index: 999;
}
.el-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-input-tag,
  .block {
    // 块变行
    display: inline-block;
  }
}
</style>
